<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props"> 内容 </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <Btn action="edituser" size="mini" @actionFn="handleEdit(scope.$index, scope.row)">编辑</Btn>
          <Btn action="edituser" size="mini" @actionFn="handleUser(scope.$index, scope.row)">指派用户</Btn>
          <Btn action="edituser" size="mini" @actionFn="handleEdit(scope.$index, scope.row)">指派权限</Btn>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="total"
    />
    <!-- 指派用户 -->
    <el-drawer
      title="指派用户"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleDrawerClose"
      @closed="handleDrawerClosed"
    >
      <div class="searchUsersBox">
        <el-input v-model.lazy.trim="username" clearable placeholder="请输入要搜索的用户名"></el-input>
        &nbsp;&nbsp;
        <el-button type="success" @click="doSearchUser">搜索用户</el-button>
      </div>
      <el-divider />
      <div class="usersListBox">
        <template v-if="users == null">
          <el-empty description="没有搜索到对应的账号"></el-empty>
        </template>
        <template v-else>
          <el-tag v-for="item in users" :key="item.id" :type="typeTagFn(item.id)" @click="setUserToRole(item.id)">{{
            item.username
          }}</el-tag>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Btn from '@/components/Btn'
import { errorMsg } from '@/utils/msg'
import { doSearchUserApi } from '@/api/roleApi'
export default {
  components: {
    Btn
  },
  props: ['tableData', 'deleteTableData', 'total', 'loadData', 'deleteUserIds'],
  data() {
    return {
      roleid: 0,
      page: 1,
      pagesize: 10,
      currentPage: 1,
      drawer: false,
      direction: 'rtl',
      username: '',
      users: null,
      selectedUser: []
    }
  },
  created() {
    // 把 + 写在左侧，进行了字符串转数字
    this.currentPage = +this.$route.query.page || 1
    // console.log('table', this.$route.query)
    this.page = this.currentPage
  },
  methods: {
    // 表格选中事件
    handleSelectionChange(rows) {
      let ids = rows.map(item => item.id)
      this.$emit('update:deleteUserIds', ids)
    },
    handleEdit(index, row) {
      // 点击了编辑，进行网络请求
      // 如果说，从简单的角度，在当前的组件中完成网络请求
      // 如果从标准的角度，一定要在父组件中完成网络请求工作
      this.$emit('handleEdit', row.id)
    },
    async handleDelete(index, row) {
      try {
        await this.$confirm('您真的要此行记录吗？', '删除确认')
        this.deleteTableData(index)
      } catch (error) {}
    },
    changePage(page) {
      this.page = page
      this.$router.replace('/admin/user?page=' + this.page)
      this.loadData(page)
    },
    handleUser(index, row) {
      this.roleid = row.id
      this.drawer = true
    },
    handleDrawerClose(done) {
      done()
    },
    handleDrawerClosed() {
      this.username = ''
      this.users = null
      this.selectedUser = []
    },
    // 给用户添加角色
    setUserToRole(userid) {
      // 如果已经在数组中，则不去添加，直添加新的
      if (this.roleid != 0) {
        if (!this.selectedUser.includes(userid)) {
          this.selectedUser.push(userid)
          // 得到当前的用户和角色，进行网络请求
          // todo ...
        }
      }
    },
    // 搜索用户
    async doSearchUser() {
      // 搜索之前判断一下当前的账号不能为空，空不进行搜索
      if (this.username == '') {
        errorMsg('账号不能为空，请输入后进行')
        return
      }
      // 进行网络请求，得到对应的账号列表
      let ret = await doSearchUserApi(this.username)
      if (ret.code != 0 || ret.data.length == 0) {
        errorMsg('没有搜索到您要查询账号信息')
        return
      }
      this.users = ret.data
    },
    typeTagFn(uid) {
      return this.selectedUser.includes(uid) ? 'danger' : 'default'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
.searchUsersBox {
  display: flex;
  padding: 10px;
}
.usersListBox {
  padding: 10px;
}
.el-tag {
  margin: 10px;
  cursor: pointer;
}
</style>
